<template>
  <el-row class="tac">
    <el-col :span="24">
       <!-- unique-opened  只保证一个选中-->
      <el-menu  class="el-menu-vertical-demo" 
      :default-active="activeroute" 
      @open="handleOpen" 
      @close="handleClose"
      unique-opened
      router
      background-color="#ffffff" 
      text-color="#000000" 
      active-text-color="#ffd04b"
      >
          <el-submenu index="1" >
          <template slot="title">
            <i class="el-icon-con1"></i>
            <span>权限管理</span>
          </template>
           <el-menu-item-group>
              <el-menu-item index="/index/jurisdictionall">权限管理</el-menu-item>
           </el-menu-item-group>
        </el-submenu>

         <el-submenu index="2" >
          <template slot="title">
            <i class="el-icon-con8"></i>
            <span>运营数据</span>
          </template>
           <el-menu-item-group>
              <!-- <el-menu-item index="/index/recovery">回收统计</el-menu-item>
              <el-menu-item index="/index/search">数据查询</el-menu-item> -->
              <el-menu-item index="/index/operationdata/population/index">总体数据</el-menu-item>
              <!-- <el-menu-item index="/index/exchangguamai">果种挂卖</el-menu-item> -->
              <el-menu-item index="/index/operationdata/monitor/index">监控数据</el-menu-item>
              <el-menu-item index="/index/operationdata/index">分析数据</el-menu-item>
           </el-menu-item-group>
        </el-submenu>

         <el-submenu index="3" >
          <template slot="title">
            <i class="el-icon-con1"></i>
            <span>用户管理</span>
          </template>
            <el-menu-item-group>           
            <el-menu-item index="/index/consumer">用户管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

         <el-submenu index="4" >
          <template slot="title">
             <i class="el-icon-con5"></i>
            <span>订单管理</span>
          </template>
          <el-menu-item-group> 
            <el-menu-item index="/index/exchangeorder1">果种订单</el-menu-item>  
            <el-menu-item index="/index/exchangeorder">果米订单</el-menu-item>        
            <el-menu-item index="/index/receivingorder"> 收获订单</el-menu-item>
            <el-menu-item index="/index/thaw">果种售后</el-menu-item>
          </el-menu-item-group>
        </el-submenu>


        <el-submenu index="5" >
          <template slot="title">
             <i class="el-icon-con7"></i>
            <span>客服售后</span>
          </template>
          <el-menu-item-group>           
            <el-menu-item index="/index/aftersale">解冻申请</el-menu-item>
          </el-menu-item-group>
        </el-submenu>


         <el-submenu index="6" >
          <template slot="title">
             <i class="el-icon-con3"></i>
            <span>团队管理</span>
          </template>
          <el-menu-item-group>           
            <!-- <el-menu-item index="/index/customer">客服管理</el-menu-item> -->
            <el-menu-item index="/index/operate">运营中心</el-menu-item>
            <el-menu-item index="/index/team">团队管理</el-menu-item>
            <el-menu-item index="/index/jurisdiction">权限设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>


        <el-submenu index="7" >
          <template slot="title">
             <i class="el-icon-con6"></i>
            <span>内容管理</span>
          </template>
          <el-menu-item-group>           
             <el-menu-item index="/index/infor">百果健康</el-menu-item>
             <el-menu-item index="/index/course">教程管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="8" >
          <template slot="title">
            <i class="el-icon-con9"></i>
            <span>积分管理</span>
          </template>
           <el-menu-item-group>
              <template slot="title" >
                <div class="title_box">果米管理</div>
              </template>
              <el-menu-item index="/index/guomi">兑换管理</el-menu-item>
              <!-- <el-menu-item index="/index/qrcode">集团总码</el-menu-item> -->
           </el-menu-item-group>
           <el-menu-item-group>
              <template slot="title" >
                <div class="title_box">金豆管理</div>
              </template>
               <el-menu-item index="/index/coupon">金豆券管理</el-menu-item>
               <el-menu-item index="/index/couponsell">金豆券派发</el-menu-item>
               <el-menu-item index="/index/setting">功能设置</el-menu-item>
               <el-menu-item index="/index/land">生成果种</el-menu-item>
           </el-menu-item-group>
            <!-- <el-menu-item-group>
              <template slot="title" >
                <div class="title_box">金钻管理</div>
              </template>
           </el-menu-item-group> -->
        </el-submenu>


        <el-submenu index="9" >
          <template slot="title">
            <i class="el-icon-con2"></i>
            <span>业务管理</span>
          </template>
           <el-menu-item-group>         
              <!-- <el-menu-item index="/index/gift">礼品管理</el-menu-item> -->
              <el-menu-item index="/index/room">直播间管理</el-menu-item>
           </el-menu-item-group>
           <el-menu-item-group>
              <el-menu-item index="/index/credit">信用系统</el-menu-item>
           </el-menu-item-group>
           <el-menu-item-group>
              <!-- <template slot="title" >
                <div class="title_box">庄园管理</div>
              </template> -->
               <el-menu-item index="/index/manor/index">庄园管理</el-menu-item>
              <!-- <el-menu-item index="/index/manor">庄园设置</el-menu-item> -->
              <!-- <el-menu-item index="/index/prohibit"> 禁止区间</el-menu-item> -->
              <!-- <el-menu-item index="/index/datament">数据管理</el-menu-item> -->
           </el-menu-item-group>
           <el-menu-item-group>
              <!-- <template slot="title" >
                <div class="title_box">签到管理</div>
              </template> -->
              <el-menu-item index="/index/sign">签到管理</el-menu-item>
           </el-menu-item-group>
           <el-menu-item-group>
              <!-- <template slot="title" >
                <div class="title_box">活动管理</div>
              </template> -->
              <!-- <el-menu-item index="/index/gashapon">扭蛋管理</el-menu-item> -->
              <el-menu-item index="/index/activity/index">活动管理</el-menu-item>
              <!-- <el-menu-item index="/index/groupwork">拼团设置</el-menu-item>
              <el-menu-item index="/index/richgroupwork">拼团富翁版</el-menu-item> -->
           </el-menu-item-group>
             <el-menu-item-group>
              <el-menu-item index="/index/exchangguamai">果种挂卖</el-menu-item> 
           </el-menu-item-group>
            <!-- <el-menu-item-group>
              <template slot="title" >
                <div class="title_box">商城管理</div>
              </template>
           </el-menu-item-group> -->
        </el-submenu>

        <!-- <el-submenu index="9" >
          <template slot="title">
            <i class="el-icon-con7"></i>
            <span>数据查询</span>
          </template>
          <el-menu-item-group>           
            <el-menu-item index="/index/search">数据查询</el-menu-item>
          </el-menu-item-group>
        </el-submenu> -->

         <el-submenu index="11" v-if="application_show">
          <template slot="title">
            <i class="el-icon-con7"></i>
            <span>应用管理</span>
          </template>
          <el-menu-item-group>           
            <el-menu-item index="/index/application">应用管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>


      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data () {
    return {
      activeroute:'',
      application_show:false,
    }
  },
  created(){
 
     this.activeroute = this.$route.path  //防止刷新时锁定不了路由
     this.show_fun()
  },
   watch: { //监听路由变化
    '$route':'upgetPath'
  },
  methods: {
     show_fun(){

       this.post("upgrade/enable", {
              }).then(res => {
                //console.log(res)
                if(res.error_code == 0){
                    if(res.result == false){
                         this.application_show = false
                    }else if(res.result == true){
                         this.application_show = true
                    }
                    
                }else {
               
                }

            })
       
     },
     upgetPath(){ //监听路由变化
      this.activeroute = this.$route.path
     },
      handleOpen (key, keyPath) {
       // console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
       // console.log(key, keyPath)
      }
    }
  }
</script>
<style scoped>
.el-menu{
  border: none;
  /* box-shadow: 3px 0px 7px 0px #E0E9FC; */
}
.el-submenu .el-menu-item{
    min-width: 100%;
}
/* .el-submenu .is-active{
    background: linear-gradient(90deg,  #5962FF, #8265FF);
    border-radius: 0px 8px 8px 0px;
    color: white !important;
    width: 175px;
} */
.el-submenu  .el-menu-item-group{
  margin-top: -14px;
}
/* .el-menu-item-group>>>.el-menu-item-group__title{
       padding:0px;
} */
.el-menu-item-group>>>.el-menu-item-group__title .title_box{
       padding: 17px 0px 0px 0px;
}
/* 主选中导航样式 */
.el-submenu.is-active>>>.el-submenu__title{  
  /* color:#ffd04b !important;
  border-left: 3px solid #ffd04b; */
  background: linear-gradient(90deg,  #5962FF, #8265FF);
  border-radius: 0px 10px 10px 0px;
  color: white !important;
  width: 170px;
}
.el-menu-item:focus, .el-menu-item:hover {
    outline: 0;
    background-color:white !important;
}
.el-icon-con1{
    background: url(../../assets/images/nav_tb1.png) center no-repeat;
    background-size: 100% 100%;
    width: 15px !important;
    height: 15px;
}

.el-submenu.is-active>>>.el-icon-con1{  
   background: url(../../assets/images/nav_tb1_active.png) center no-repeat;
     background-size: 100% 100%;
    width: 15px;
     height: 15px;
}

.el-icon-con1:before{
    content: "con1";
    font-size: 16px;
    visibility: hidden;
}


.el-icon-con2{
    background: url(../../assets/images/nav_tb2.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
     height: 16px;
}
.el-submenu.is-active>>>.el-icon-con2{  
   background: url(../../assets/images/nav_tb2_active.png) center no-repeat;
     background-size: 100% 100%;
    width: 16px;
     height: 16px;
}
.el-icon-con2:before{
    content: "con1";
    font-size: 16px;
    visibility: hidden;
}

.el-icon-con3{
    background: url(../../assets/images/nav_tb3.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
     height: 16px;
}
.el-submenu.is-active>>>.el-icon-con3{  
   background: url(../../assets/images/nav_tb3_active.png) center no-repeat;
     background-size: 100% 100%;
    width: 16px;
     height: 16px;
}
.el-icon-con3:before{
    content: "con1";
    font-size: 16px;
    visibility: hidden;
}


.el-icon-con4{
    background: url(../../assets/images/nav_tb4.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
     height: 16px;
}
.el-submenu.is-active>>>.el-icon-con4{  
   background: url(../../assets/images/nav_tb4_active.png) center no-repeat;
     background-size: 100% 100%;
    width: 16px;
     height: 16px;
}
.el-icon-con4:before{
    content: "con1";
    font-size: 16px;
    visibility: hidden;
}

.el-icon-con5{
    background: url(../../assets/images/nav_tb5.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
     height: 16px;
}
.el-submenu.is-active>>>.el-icon-con5{  
   background: url(../../assets/images/nav_tb5_active.png) center no-repeat;
     background-size: 100% 100%;
    width: 16px;
     height: 16px;
}
.el-icon-con5:before{
    content: "con1";
    font-size: 16px;
    visibility: hidden;
}

.el-icon-con6{
    background: url(../../assets/images/nav_tb6.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
     height: 16px;
}
.el-submenu.is-active>>>.el-icon-con6{  
   background: url(../../assets/images/nav_tb6_active.png) center no-repeat;
     background-size: 100% 100%;
    width: 16px;
     height: 16px;
}
.el-icon-con6:before{
    content: "con1";
    font-size: 16px;
    visibility: hidden;
}

.el-icon-con7{
    background: url(../../assets/images/nav_tb7.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
     height: 16px;
}
.el-submenu.is-active>>>.el-icon-con7{  
   background: url(../../assets/images/nav_tb7_active.png) center no-repeat;
     background-size: 100% 100%;
    width: 16px;
     height: 16px;
}
.el-icon-con7:before{
    content: "con1";
    font-size: 16px;
    visibility: hidden;
}

.el-icon-con8{
    background: url(../../assets/images/nav_tb8.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
     height: 16px;
}
.el-submenu.is-active>>>.el-icon-con8{  
   background: url(../../assets/images/nav_tb8_active.png) center no-repeat;
     background-size: 100% 100%;
    width: 16px;
    height: 16px;
}
.el-icon-con8:before{
    content: "con1";
    font-size: 16px;
    visibility: hidden;
}


.el-icon-con9{
    background: url(../../assets/images/nav_tb9.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
     height: 16px;
}
.el-submenu.is-active>>>.el-icon-con9{  
   background: url(../../assets/images/nav_tb9_active.png) center no-repeat;
     background-size: 100% 100%;
    width: 16px;
    height: 16px;
}
.el-icon-con9:before{
    content: "con1";
    font-size: 16px;
    visibility: hidden;
}
</style>